<template>
  <div>
    <div class="labels row">
      <template v-for="item in labels">
        <i
          @click="desc(item.code)"
          :class="['label', 'pointer', selected == item.code ? 'active' : '']"
        >
          {{ item.label }}
        </i>
      </template>
    </div>
    <div class="message">
      <div v-if="selected == '1'">按综合评分加星</div>
      <div v-else-if="selected == '2'">
        <i>榜单：</i>
        <i
          @click="countData = 'work'"
          :class="countData == 'work' ? 'active' : ''"
          >近一周</i
        >
        <i
          @click="countData = 'month'"
          :class="countData == 'month' ? 'active' : ''"
          >近一月</i
        >
        <i
          @click="countData = 'year'"
          :class="countData == 'year' ? 'active' : ''"
          >近一年</i
        >
        <i
          @click="countData = 'count'"
          :class="countData == 'count' ? 'active' : ''"
          >总销售量</i
        >
      </div>
    </div>
    <issuer
      v-for="item in newisserList"
      :issure="item"
      :key="item.userId"
    ></issuer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "1",
      countData: "count",
      labels: [
        { label: "星级排行榜", code: 1 },
        { label: "销量排行榜", code: 2 },
        { label: "好评排行榜", code: 3 },
        { label: "收藏排行榜", code: 4 },
      ],
    };
  },
  props: ["isserList"],
  components: { issuer: () => import("@/components/issuer/issuerOne.vue") },
  computed: {
    newisserList() {
      return this.isserList;
    },
  },
  created() {
    this.desc(1);
  },
  methods: {
    desc(code) {
      this.selected = code;
      console.log("TO desc", this.newisserList);
      switch (code) {
        case 1:
          this.newisserList.sort((a, b) => {
            return b.StoreInfo.starsNum - a.StoreInfo.starsNum;
          });
          break;
        case 2:
          this.newisserList.sort((a, b) => {
            return b.count - a.count;
          });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.labels {
  border-bottom: 1px solid rgb(133, 105, 105);
  .label {
    padding: 4px 8px;
    margin-right: 10px;
  }
}
.active {
  background: rgb(201, 190, 190);
}
.message {
  font-size: 12px;
  color: lightslategray;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 2;
  padding-left: 6px;
  padding-right: 6px;
  border-bottom: 1px solid rgb(133, 105, 105);
  i {
    margin-right: 14px;
  }
  i:hover {
    cursor: pointer;
  }
}
</style>